<template>
	<div class="detailHeader">
    
		<el-collapse v-model="activeNames">
			<el-collapse-item title="作业指令" name="1">
        <template slot="title">
          <div class="compTop">
            <span class="cTitle">作业指令</span>
            <span class="compTitle require">组织</span>
            <el-select
              v-model="formData.companyId"
              v-selecttext="formData.companyName,listCompData,'companyId'"
              filterable
              collapse-tags
              size="mini"
              clearable
              class="compList"
            >
              <el-option
                v-for="item in listCompData"
                :key="item.companyId"
                :label="item.companyName"
                :value="item.companyId"
              ></el-option>
            </el-select>
          </div>
        </template>
        <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
					<el-row :gutter="20">
            <el-col :span="8">
							<el-form-item label="指令编号" prop="trustNo" class="top">
								<el-input
									v-model="formData.trustNo"
									size="mini"
									placeholder=""
									:disabled="true"
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="客户名称" prop="customerId" class="top">
								<el-select
									v-model="formData.customerId"
									filterable
                  multiple
									collapse-tags
									size="mini"
									clearable
									class="others"
                  @change="changecustomerId"
								>
									<el-option
										v-for="item in customerData"
										:key="item.customerId"
										:label="item.customerName"
										:value="item.customerId"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="作业过程" prop="processCode" class="top">
								<el-select
									v-model="formData.processCode"
                  v-selecttext="formData.processName,processData,'processCode'"
									filterable
									collapse-tags
                  :disabled="status === 'edit'"
									size="mini"
									clearable
									class="others"
                  @change="changeProcess"
								>
									<el-option
										v-for="item in processData"
										:key="item.processCode"
										:label="item.processName"
										:value="item.processCode"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="计划件数" prop="planQuantity" class="top">
								<el-input
									v-model="formData.planQuantity"
									size="mini"
									placeholder=""
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="计划重量" prop="planTon" class="top">
								<el-input
									v-model="formData.planTon"
									size="mini"
									placeholder=""
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="计划体积" prop="planVolume" class="top">
								<el-input
									v-model="formData.planVolume"
									size="mini"
									placeholder=""
								/>
							</el-form-item>
						</el-col>
            <!-- <el-col :span="8">
							<el-form-item label="剩余货权件数" prop="planQuantity" class="top">
								<el-input
									v-model="formData.planQuantity"
									size="mini"
									placeholder=""
									:disabled="true"
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="剩余货权重量" prop="planTon" class="top">
								<el-input
									v-model="formData.planTon"
									size="mini"
									placeholder=""
									:disabled="true"
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="剩余货权体积" prop="planVolume" class="top">
								<el-input
									v-model="formData.planVolume"
									size="mini"
									placeholder=""
									:disabled="true"
								/>
							</el-form-item>
						</el-col> -->
            <el-col :span="8">
							<el-form-item label="计划车数" prop="planCarNum" class="top">
								<el-input
									v-model="formData.planCarNum"
									size="mini"
									placeholder=""
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="货种" prop="cargoCategoryCode" class="top">
								<el-select
									v-model="formData.cargoCategoryCode"
                  v-selecttext="formData.cargoCategoryName,cargoCategoryData,'cargoCategoryCode'"
									filterable
									collapse-tags
									size="mini"
									clearable
									class="others"
                  @change="changeCargoCategoryCode"
								>
									<el-option
										v-for="item in cargoCategoryData"
										:key="item.cargoCategoryCode"
										:label="item.cargoCategoryName"
										:value="item.cargoCategoryCode"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="贸别" prop="tradeType" class="top">
								<el-select
									v-model="formData.tradeType"
									v-selecttext="formData.tradeName,tradeData,'tradeType'"
									filterable
									collapse-tags
									size="mini"
									clearable
									class="others"
								>
									<el-option
										v-for="item in tradeData"
										:key="item.tradeType"
										:label="item.tradeName"
										:value="item.tradeType"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="预缴费" prop="paymentStatus" class="top">
								<el-select
									v-model="formData.paymentStatus"
									filterable
									size="mini"
									clearable
									class="others"
                  @change="changePayStatus"
								>
									<el-option
										v-for="item in paymentStatusData"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
            <el-col :span="8" v-if="isPay">
							<el-form-item label="预缴金额" prop="preAmount" class="top">
								<el-input
									v-model="formData.preAmount"
									size="mini"
									placeholder=""
								/>
							</el-form-item>
						</el-col>
            
            <el-col :span="8">
							<el-form-item label="附件" class="top">
								<Upload @changeFile="changeFile" :fileListEdit="fileList"/>
							</el-form-item>
						</el-col>
            <el-col :span="16">
							<el-form-item label="作业要求" prop="remark" class="top">
								<el-input
									v-model="formData.remark"
                  type="textarea"
                  :rows="2"
									size="mini"
									placeholder=""
								/>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-collapse-item>
      <el-collapse-item title="船舶信息" name="2" v-if="source === '1'|| destination === '1'">
        <el-form :model="shipFormData" :rules="rules" ref="shipRuleForm" label-width="130px" class="demo-ruleForm">
					<el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="船名航次" prop="id" class="top">
                <el-select
                  v-model="shipFormData.id"
                  filterable
                  size="mini"
                  class="others"
                  @change="changeShipVoyage"
                >
                  <el-option
                    v-for="item in shipVoyageData"
                    :key="item.shipvoyageId"
                    :label="item.shipvoyageName"
                    :value="item.shipvoyageId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="货种" prop="cargoCategoryName" class="top">
                <el-input
                  v-model="shipFormData.cargoCategoryName"
                  size="mini"
                  placeholder=""
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="载重吨" prop="weightTon" class="top">
                <el-input
                  v-model="shipFormData.weightTon"
                  size="mini"
                  placeholder=""
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="预抵时间" prop="arrivalTimePlan" class="top">
                <el-input
                  v-model="shipFormData.arrivalTimePlan"
                  size="mini"
                  placeholder=""
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="船代" prop="customerName" class="top">
                <el-input
                  v-model="shipFormData.customerName"
                  size="mini"
                  placeholder=""
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="船舶总吨" prop="totalTon" class="top">
                <el-input
                  v-model="shipFormData.totalTon"
                  size="mini"
                  placeholder=""
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="船舶净吨" prop="netTon" class="top">
                <el-input
                  v-model="shipFormData.netTon"
                  size="mini"
                  placeholder=""
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="船长" prop="shipLength" class="top">
                <el-input
                  v-model="shipFormData.shipLength"
                  size="mini"
                  placeholder=""
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="船宽" prop="shipWidth" class="top">
                <el-input
                  v-model="shipFormData.shipWidth"
                  size="mini"
                  placeholder=""
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="舱口数" prop="hatchNo" class="top">
                <el-input
                  v-model="shipFormData.hatchNo"
                  size="mini"
                  placeholder=""
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="起运港" prop="startPortName" class="top">
                <el-input
                  v-model="shipFormData.startPortName"
                  size="mini"
                  placeholder=""
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="目的港" prop="endPortName" class="top">
                <el-input
                  v-model="shipFormData.endPortName"
                  size="mini"
                  placeholder=""
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
			</el-collapse-item>
      <el-collapse-item name="3" v-if="!(destination === '5' && source === '1' )">
        <template slot="title">
          <div class="slotTitle">
            <span>{{source === '4' ? '提单信息' : '货物信息'}}</span>
            <div style="display:flex;">
              <el-upload
                v-if="source === '4'"
                class="upload-demo"
                action=""
                :on-change="(i)=>handleChange(i,'td')"
                accept=".xlsx, .xls"
              >
                <el-button size="small" icon="el-icon-upload2" plain>导入提单</el-button>
              </el-upload>
              <el-button type="text" @click.stop="checkTicket" v-if="source === '3'">选择票货</el-button>
              <el-button type="text" @click.stop="addCargo('td')" v-else-if="(source !== '1' && destination !== '1') || source === '2' " style="margin-left:10px;">添加</el-button>
            </div>
            
          </div>
        </template>
        <BaseTable
            :data="billList"
            :columns="billListColumns"
            :tableHeight="300"
            :pagination="false"
        ></BaseTable>
			</el-collapse-item>
      <!-- 集装箱信息表格 -->
      <el-collapse-item name="3" v-if="destination === '3' && source === '4'">
        <template slot="title">
          <div class="slotTitle">
            <span>集装箱信息</span>
            <div style="display:flex;">
              <el-upload
                v-if="source === '4'"
                class="upload-demo"
                action=""
                :on-change="(i)=>handleChange(i,'jzx')"
                accept=".xlsx, .xls"
              >
                <el-button size="small" icon="el-icon-upload2" plain>导入集装箱信息</el-button>
              </el-upload>
              <el-button type="text" @click.stop="addCargo('jzx')" style="margin-left:10px;">添加</el-button>
            </div>
            
          </div>
        </template>
        <BaseTable
            :data="billBoxList"
            :columns="billBoxListColumns"
            :tableHeight="300"
            :pagination="false"
        ></BaseTable>
			</el-collapse-item>
		</el-collapse>

    <el-dialog
      title="选择票货"
      :visible.sync="dialogVisible"
      append-to-body
      width="75%">
      <ticketsManage :height="300" :customerId="customerId" :processCode="formData.processCode" ref="checkTicket" v-bind="$attrs"/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitTicket">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="预览"
      :visible.sync="previewVisible"
    >
      <div>
        <img :src="imgurl" style="width:100%;height:auto"/>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="previewVisible = false">取 消</el-button>
        <el-button type="primary" @click="downLoadFile(fileInfo)">下载</el-button>
      </span>
    </el-dialog>
	</div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import Upload from '@/components/upload'
import ticketsManage from '../ticketsManage/index.vue'
import api from '@/api/Business/operationInstruction'
import publicapi from '@/api/public'
import XLSX from 'xlsx';
import axios from 'axios'
import config from '@/network/config.js'
export default {
  name: 'detail',
  components: { BaseTable, ticketsManage,Upload },
  props: {
    status: {
      type: String
    },
    fileList: { // 附件list
      type: Array
    },
    listCompData:{// 组织下拉框
      type:Array,
      default:() =>[]
    },
    customerData:{ // 客户名称下拉框
      type:Array,
      default:() =>[]
    },
    processData:{// 作业过程
      type:Array,
      default:() =>[]
    },
  },
  data() {
    return {
      activeNames: ['1', '2', '3', '4'],
      listComp: '', // 组织
      formData: {
        trustNo: '',
        customerId: [],
        companyId: '',
        companyName: '',
        customerName: [],
        processCode: '',
        planQuantity: '',
        planTon: '',
        planVolume: '',
        cargoCategoryCode: '',
        moveBerthTime: '',
        planCarNum: 0,
        remark: '',
        tradeType: '',
        preAmount: '',
        shipvoyageId:'',
        paymentStatus: '',
        status: '',
        mattachmentInfoList: []
      }, // from
      shipFormData: { // 船舶航次表单数据
        id: '',
        cargoCategoryName: '',
        weightTon: '',
        customerName: '',
        arrivalTimePlan: '',
        totalTon: '',
        netTon: '',
        shipLength: '',
        shipWidth: '',
        hatchNo: '',
        startPortName: '',
        endPortName: ''
      },
      customerId: '', // 传
      shipVoyageData: [], // 船名航次下拉框
      cargoCategoryData: [], // 货种
      cargoData: [], // 货名
      paymentStatusData: [ // 预缴状态是否
        { label: '未预缴', value: 1 },
        { label: '已预缴', value: 2 }
      ],
      source: '1', // 源
      destination: '', // 目的
      isAddTicket:'', // 是否添加票货
      tradeData: [ // 贸别
        { tradeName: '内贸', tradeType: '内贸' },
        { tradeName: '外贸', tradeType: '外贸' }
      ],
      packingData: [{ label: '散', value: 1 }, { label: '件', value: 2 }],
      billList: [ // 提单明细表格数据
      ],
      billListColumns: [// 提单明细表头
        {
          prop: 'billNo',
          label: '提单号',
          width: 100,
          render: (h, params) => {
            return h(
              'div',
              [
                h('el-input', {
                  props: {
                    value: params.row.billNo,
                    type: 'text',
                    size: 'mini',
                    disabled: this.source === '1' || (this.destination === '1' && this.source !== '2') || this.source === '3',
                    placeholder: '请输入'
                  },
                  on: {
                    input: e => {
                      console.log(e)
                      this.$set(this.billList[params.row.index], 'billNo', e)
                    }
                  }
                })
              ])
          }
        },
        {
          prop: 'cargoCode',
          label: '货名',
          width: 150,
          render: (h, params) => {
            return h(
              'div',
              [
                h(
                  'el-select',
                  {
                    props: {
                      value: params.row.cargoCode,
                      placeholder: '请选择货名',
                      size: 'mini',
                      disabled: this.source === '1' || (this.destination === '1' && this.source !== '2') || this.source === '3',
                      clearable: true
                    },
                    on: {
                      change: e => {
                        console.log(e)
                        this.$set(this.billList[params.row.index], 'cargoCode', e)
                        this.cargoData.forEach(item => {
                          if (item.cargoCode === e) {
                            this.$set(this.billList[params.row.index], 'cargoName', item.cargoName)
                          }
                        })
                      }
                    }
                  },
                  this.cargoData.map(item => {
                    return h('el-option', {
                      props: {
                        value: item.cargoCode,
                        label: item.cargoName,
                        size: 'mini'
                      }
                    })
                  })
                )
              ])
          }
        },
        {
          prop: 'packing',
          label: '包装',
          width: 100,
          render: (h, params) => {
            return h(
              'div',
              [
                h(
                  'el-select',
                  {
                    props: {
                      value: params.row.packing,
                      placeholder: '货名',
                      size: 'mini',
                      disabled: this.source === '1' || (this.destination === '1' && this.source !== '2') || this.source === '3',
                      clearable: true
                    },
                    on: {
                      change: e => {
                        console.log(e)
                        this.$set(this.billList[params.row.index], 'packing', e)
                      }
                    }
                  },
                  this.packingData.map(item => {
                    return h('el-option', {
                      props: {
                        value: item.value,
                        label: item.label,
                        size: 'mini'
                      }
                    })
                  })
                )
              ])
          }
        },
        {
          prop: 'issuingCompanyId',
          label: '开证公司',
          width: 200,
          render: (h, params) => {
            return h(
              'div',
              [
                h(
                  'el-select',
                  {
                    props: {
                      value: params.row.issuingCompanyId,
                      placeholder: '开证公司',
                      size: 'mini',
                      disabled: this.source === '1' || (this.destination === '1' && this.source !== '2') || this.source === '3',
                      clearable: true,
                      filterable: true
                    },
                    on: {
                      change: e => {
                        console.log(e)
                        this.$set(this.billList[params.row.index], 'issuingCompanyId', e)
                        this.customerData.forEach(item => {
                          if (item.customerId === e) {
                            this.$set(this.billList[params.row.index], 'issuingCompanyName', item.customerName)
                          }
                        })
                      }
                    }
                  },
                  this.customerData.map(item => {
                    return h('el-option', {
                      props: {
                        value: item.customerId,
                        label: item.customerName,
                        size: 'mini'
                      }
                    })
                  })
                )
              ])
          }
        },
        {
          prop: 'cargoOwnerId',
          label: '货主',
          width: 200,
          render: (h, params) => {
            return h(
              'div',
              [
                h(
                  'el-select',
                  {
                    props: {
                      value: params.row.cargoOwnerId,
                      placeholder: '货主',
                      size: 'mini',
                      disabled: this.source === '1' || (this.destination === '1' && this.source !== '2') || this.source === '3',
                      clearable: true,
                      filterable: true
                    },
                    on: {
                      change: e => {
                        console.log(e)
                        this.$set(this.billList[params.row.index], 'cargoOwnerId', e)
                        this.customerData.forEach(item => {
                          if (item.customerId === e) {
                            this.$set(this.billList[params.row.index], 'cargoOwnerName', item.customerName)
                          }
                        })
                      }
                    }
                  },
                  this.customerData.map(item => {
                    return h('el-option', {
                      props: {
                        value: item.customerId,
                        label: item.customerName,
                        size: 'mini'
                      }
                    })
                  })
                )
              ])
          }
        },
        {
          prop: 'cargoAgentId',
          label: '货代',
          width: 200,
          render: (h, params) => {
            return h(
              'div',
              [
                h(
                  'el-select',
                  {
                    props: {
                      value: params.row.cargoAgentId,
                      placeholder: '货代',
                      size: 'mini',
                      disabled: this.source === '1' || (this.destination === '1' && this.source !== '2') || this.source === '3',
                      clearable: true,
                      filterable: true
                    },
                    on: {
                      change: e => {
                        console.log(e)
                        this.$set(this.billList[params.row.index], 'cargoAgentId', e)
                        this.customerData.forEach(item => {
                          if (item.customerId === e) {
                            this.$set(this.billList[params.row.index], 'cargoAgentName', item.customerName)
                          }
                        })
                      }
                    }
                  },
                  this.customerData.map(item => {
                    return h('el-option', {
                      props: {
                        value: item.customerId,
                        label: item.customerName,
                        size: 'mini'
                      }
                    })
                  })
                )
              ])
          }
        },
        {
          prop: 'quantity',
          label: '件数',
          width: 110,
          render: (h, params) => {
            return h(
              'div',
              [
                h('el-input', {
                  props: {
                    value: params.row.quantity,
                    type: 'text',
                    size: 'mini',
                    disabled: (this.source === '1' || (this.destination === '1' && this.source !== '2')) && (this.source !== '3' || this.destination !== '1'),
                    placeholder: '请输入件数'
                  },
                  on: {
                    input: e => {
                      console.log(e)
                      this.$set(this.billList[params.row.index], 'quantity', e)
                      let num = 0
                      this.billList.forEach(item => {
                        num = num + Number(item.quantity)
                      })
                      this.$set(this.formData, 'planQuantity', num)
                      console.log(params.row.index, 'index');
                    }
                  }
                })
              ])
          }
        },
        {
          prop: 'ton',
          label: '重量',
          width: 110,
          render: (h, params) => {
            return h(
              'div',
              [
                h('el-input', {
                  props: {
                    value: params.row.ton,
                    type: 'text',
                    size: 'mini',
                    disabled: (this.source === '1' || (this.destination === '1' && this.source !== '2')) && (this.source !== '3' || this.destination !== '1'),
                    placeholder: '请输入重量'
                  },
                  on: {
                    input: e => {
                      console.log(e)
                      this.$set(this.billList[params.row.index], 'ton', e)
                      let num = 0
                      this.billList.forEach(item => {
                        num = num + Number(item.ton)
                      })
                      this.$set(this.formData, 'planTon', num)
                      console.log(params.row.index, 'index');
                    }
                  }
                })
              ])
          }
        },
        {
          prop: 'volume',
          label: '体积',
          width: 110,
          render: (h, params) => {
            return h(
              'div',
              [
                h('el-input', {
                  props: {
                    value: params.row.volume,
                    type: 'text',
                    size: 'mini',
                    disabled: (this.source === '1' || (this.destination === '1' && this.source !== '2')) && (this.source !== '3' || this.destination !== '1'),
                    placeholder: '请输入体积'
                  },
                  on: {
                    input: e => {
                      console.log(e)
                      this.$set(this.billList[params.row.index], 'volume', e)
                      let num = 0
                      this.billList.forEach(item => {
                        num = num + Number(item.volume)
                      })
                      this.$set(this.formData, 'planVolume', num)
                      console.log(params.row.index, 'index');
                    }
                  }
                })
              ])
          }
        },
        {
          label: '操作',
          fixed: 'right',
          align: 'center',
          width: 100,
          disabled: true,
          render: (h, params) => {
            return h(
              'div',

              [

                h('el-button', {
                  props: {
                    size: 'mini'
                  },

                  domProps: {
                    // 添加标签,使用自己引入的iconfont图标
                    // innerHTML: `<i class="iconfont icon-tubiao_liebiaoshanchu" style="color:#DA2821"></i> 删除`
                    innerHTML: `<span style='color:#F75E5E'><i class='iconfont icon-1-08'></i><span  style='padding-left:5px;'>删除</span></span>`
                  },
                  on: {
                    click: () => {
                      this.handleDelete(params.row.id, 'td')
                    }
                  }
                })
              ]
            )
          }
        }
      ],
      billBoxList: [ // 集装箱明细表格数据
      ],
      billBoxListColumns: [// 集装箱明细表头
        {
          prop: 'boxNo',
          label: '箱号',
          render: (h, params) => {
            return h(
              'div',
              [
                h('el-input', {
                  props: {
                    value: params.row.boxNo,
                    type: 'text',
                    size: 'mini',
                    placeholder: '请输入'
                  },
                  on: {
                    input: e => {
                      console.log(e)
                      this.$set(this.billBoxList[params.row.index], 'boxNo', e)
                    }
                  }
                })
              ])
          }
        },
        {
          prop: 'boxType',
          label: '箱型',
          render: (h, params) => {
            return h(
              'div',
              [
                h('el-input', {
                  props: {
                    value: params.row.boxType,
                    type: 'text',
                    size: 'mini',
                    placeholder: '请输入'
                  },
                  on: {
                    input: e => {
                      this.$set(this.billBoxList[params.row.index], 'boxType', e)
                    }
                  }
                })
              ])
          }
        },
        {
          prop: 'boxSize',
          label: '尺寸',
          render: (h, params) => {
            return h(
              'div',
              [
                h('el-input', {
                  props: {
                    value: params.row.boxSize,
                    type: 'text',
                    size: 'mini',
                    placeholder: '请输入'
                  },
                  on: {
                    input: e => {
                      console.log(e)
                      this.$set(this.billBoxList[params.row.index], 'boxSize', e)
                    }
                  }
                })
              ])
          }
        },
        {
          prop: 'section',
          label: '节数',
          render: (h, params) => {
            return h(
              'div',
              [
                h('el-input', {
                  props: {
                    value: params.row.section,
                    type: 'text',
                    size: 'mini',
                    placeholder: '请输入'
                  },
                  on: {
                    input: e => {
                      console.log(e)
                      this.$set(this.billBoxList[params.row.index], 'section', e)
                    }
                  }
                })
              ])
          }
        },
        {
          prop: 'quantity',
          label: '件数',
          render: (h, params) => {
            return h(
              'div',
              [
                h('el-input', {
                  props: {
                    value: params.row.quantity,
                    type: 'text',
                    size: 'mini',
                    placeholder: '请输入'
                  },
                  on: {
                    input: e => {
                      console.log(e)
                      this.$set(this.billBoxList[params.row.index], 'quantity', e)
                    }
                  }
                })
              ])
          }
        },
        {
          prop: 'ton',
          label: '重量',
          render: (h, params) => {
            return h(
              'div',
              [
                h('el-input', {
                  props: {
                    value: params.row.ton,
                    type: 'text',
                    size: 'mini',
                    placeholder: '请输入'
                  },
                  on: {
                    input: e => {
                      console.log(e)
                      this.$set(this.billBoxList[params.row.index], 'ton', e)
                    }
                  }
                })
              ])
          }
        },
        {
          prop: 'volume',
          label: '体积',
          render: (h, params) => {
            return h(
              'div',
              [
                h('el-input', {
                  props: {
                    value: params.row.volume,
                    type: 'text',
                    size: 'mini',
                    placeholder: '请输入'
                  },
                  on: {
                    input: e => {
                      console.log(e)
                      this.$set(this.billBoxList[params.row.index], 'volume', e)
                    }
                  }
                })
              ])
          }
        },
        {
          label: '操作',
          fixed: 'right',
          align: 'center',
          width: 100,
          disabled: true,
          render: (h, params) => {
            return h(
              'div',

              [

                h('el-button', {
                  props: {
                    size: 'mini'
                  },

                  domProps: {
                    // 添加标签,使用自己引入的iconfont图标
                    // innerHTML: `<i class="iconfont icon-tubiao_liebiaoshanchu" style="color:#DA2821"></i> 删除`
                    innerHTML: `<span style='color:#F75E5E'><i class='iconfont icon-1-08'></i><span  style='padding-left:5px;'>删除</span></span>`
                  },
                  on: {
                    click: () => {
                      this.handleDelete(params.row.id, 'jzx')
                    }
                  }
                })
              ]
            )
          }
        }
      ],
      tableData: [
        { portName: 'aaa', portCode: 'aaa' },
        { portName: 'bbb', portCode: 'bbb' }
      ], // form表单table数据
      tableColumn: [ // table表头
        { type: 'selection' },
        { prop: 'portName', label: '货转日期' },
        { prop: 'portCode', label: '货转件数' },
        { prop: 'portCode', label: '货转体积' },
        { prop: 'portCode', label: '开证公司' },
        { prop: 'portCode', label: '目标货主' },
        { prop: 'portCode', label: '备注' },
        { prop: 'portCode', label: '创建人' },
        { prop: 'portCode', label: '创建时间' },
        {
          label: '操作',
          fixed: 'right',
          align: 'center',
          width: 120,
          render: (h, params) => {
            return h(
              'div',

              [
                h('el-button', {
                  props: {
                    size: 'mini'
                  },

                  domProps: {
                    // 添加标签,使用自己引入的iconfont图标
                    innerHTML:
                              "<span style='color:#0B6CD6'><i class='iconfont icon-1-07'></i><span  style='padding-left:5px;'>查看附件</span></span>"
                  },
                  on: {
                    click: () => {
                      this.handleEditOut(params.row)
                    }
                  }
                })
              ]
            )
          }
        }
      ],
      dialogVisible: false, // 票货dialog
      previewVisible: false, // 预览附件dialog
      imgurl: '',
      rules: {
        customerId: [
          { required: true, message: '请选择客户名称', trigger: 'change' }
        ],
        paymentStatus: [
          { required: true, message: '请选择预缴费', trigger: 'change' }
        ],
        preAmount: [
          { required: true, message: '请输入预缴金额', trigger: 'blur' }
        ],
        tradeType: [
          { required: false, message: '请输入贸别', trigger: 'change' }
        ],
        cargoCategoryCode:[
          { required: false, message: '请选择货种', trigger: 'change' }
        ],
        processCode: [
          { required: true, message: '请选择作业过程', trigger: 'blur' }
        ],
        id: [
          { required: true, message: '请选择船名航次', trigger: 'change' }
        ],
      },
      isPay: false // 是否预缴
    }
  },
  watch: {
    'formData.cargoCategoryCode': {
      handler(value) {
        this.changeCargoCategoryCode(value)
      },
      deep: true
    },
    'formData.customerId': {
      handler(value) {
        this.changecustomerId(value)
      },
      deep: true
    },
    billList: {
      handler(value) {
        if(this.destination === '5' && this.source === '1') return
        let num = 0 // 修改form中的数量
        this.billList.forEach(item => {
          num = num + Number(item.quantity ?? 0)
        })
        this.$set(this.formData, 'planQuantity', Number(num.toFixed(3)))
        let num1 = 0 // 修改form中的数量
        this.billList.forEach(item => {
          num1 = num1 + Number(item.ton ?? 0)
        })
        this.$set(this.formData, 'planTon', Number(num1.toFixed(3)))
        let num2 = 0 // 修改form中的数量
        this.billList.forEach(item => {
          num2 = num2 + Number(item.volume ?? 0)
        })
        this.$set(this.formData, 'planVolume', Number(num2.toFixed(3)))
      },
      deep: true
    },
    'shipFormData.id': {
      handler(value) {
        if (value) this.changeShipVoyage(value)
      }
    }
  },
  mounted() {
    this.getShipvoyage()
    this.getCargoCategory()
  },
  methods: {
    /**
     * 修改客户时，把name加进去，修改结构
     */
    changecustomerId(e) {
      this.formData.customerName = []
      this.formData.customerId.forEach(item => {
        this.customerData.forEach(i => {
          if (item === i.customerId) {
            this.formData.customerName.push(i.customerName)
          }
        })
      })
      this.customerId = this.formData.customerId.join()
    },
    /**
     * 获取船名航次
     */
    async getShipvoyage() {
      const res = await api.getListShipvoyage()
      this.shipVoyageData = res.data.data
    },
    /**
     * 根据船名航次获取航次信息
     */
    async changeShipVoyage(e) {
      if (!e) return
      this.formData.shipvoyageId = e
      
      const res = await publicapi.getShipVoyageById({ id: e })
      this.shipFormData = res.data.data
      if(this.formData.processCode === 'QINGCANG') {
        this.formData.planQuantity = res.data.data.hatchNo
      }
      if (this.status === 'edit' && this.source !== '1') return
      const res1 = await api.reqGetBillById(e)
      this.billList = res1.data.data
    },
    /**
     * 获取货种
     */
    async getCargoCategory() {
      const res = await publicapi.getlistCargoCategory()
      this.cargoCategoryData = res.data.data
    },
    /**
     * 根据货种获取货名
     */
    changeCargoCategoryCode(e) {
      publicapi.getListCargo({ cargoCategoryCode: e }).then(res => {
        this.cargoData = res.data.data
      }).catch(() => {})
    },
    
    /**
     * 修改作业过程
     */
    changeProcess(e) {
      this.billList = []
      let isProcessType;
      this.processData.forEach(item => {
        if (item.processCode === e) {
          this.source = item.source
          this.destination = item.destination
          this.isAddTicket = item.isAddTicket
          isProcessType = item.processType
        }
      })
      if(isProcessType === 1) {
        this.rules.cargoCategoryCode[0].required = true
      } else {
        this.rules.cargoCategoryCode[0].required = false
      }
      
      if(this.isAddTicket === 'Y') {
        this.rules.tradeType[0].required = true
      } else {
        this.rules.tradeType[0].required = false
      }
      
    },
    /**
     * 修改缴费状态
     */
    changePayStatus(e) {
      this.isPay = e !== 1
    },
    /**
     * 添加货物信息
     * @params type td:提单信息 jzx:集装箱信息
     */
    addCargo(type) {
      if (type === 'td') {
        const obj = {
          billNo: '',
          cargoCode: '',
          packing: '',
          issuingCompanyId: '',
          cargoOwnerId: '',
          cargoAgentId: '',
          quantity: '',
          ton: '',
          volume: ''
        }
        this.billList.push(obj)
      } else if (type === 'jzx') {
        const obj = {
          boxNo: '',
          boxType: '',
          boxSize: '',
          section: '',
          quantity: '',
          ton: '',
          volume: ''
        }
        this.billBoxList.push(obj)
      }
    },
    /**
     * 导入提单
     */
    handleChange(file, type) {
      const reader = new FileReader();
      const _this = this;
      reader.readAsArrayBuffer(file.raw);
      reader.onload = function() {
        const buffer = reader.result;
        const bytes = new Uint8Array(buffer);
        const length = bytes.byteLength;
        let binary = '';
        for (let i = 0; i < length; i++) {
          binary += String.fromCharCode(bytes[i]);
        }
        const wb = XLSX.read(binary, {
          type: 'binary'
        });
        const outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
        console.log(outdata, 'outdataddd');
        _this.billList = [];
        _this.billBoxList = [];
        if (type === 'td') {
          // 从解析出来的数据中提取相应的数据
          if (_this.cargoData.length === 0) {
            _this.$message.warning('请选择货种')
            return
          }
          let num = 0
          outdata.forEach(item => {
            if (_this.cargoData.filter(i => i.cargoName === item['货名']).length === 0) {
              if (num === 0) _this.$message.warning('该提单与所选货种不匹配，请核实后再导入！')
              num++
              return
            }
            _this.billList.push({
              id: Math.round(Math.random() * 100000),
              billNo: item['提单号'],
              cargoCode: _this.cargoData.filter(i => i.cargoName === item['货名'])[0].cargoCode,
              cargoName: item['货名'],
              packing: _this.packingData.filter(i => i.label === item['包装'])[0].value,
              issuingCompanyId: _this.customerData.filter(i => i.customerName === item['开证公司'])[0].customerId,
              issuingCompanyName: item['开证公司'],
              cargoOwnerId: _this.customerData.filter(i => i.customerName === item['货主'])[0].customerId,
              cargoOwnerName: item['货主'],
              cargoAgentId: _this.customerData.filter(i => i.customerName === item['货代'])[0].customerId,
              cargoAgentName: item['货代'],
              quantity: item['件数'],
              ton: item['重量'],
              volume: item['体积']
            });
          });
        } else if (type === 'jzx') {
          outdata.forEach(item => {
            _this.billBoxList.push({
              id: Math.round(Math.random() * 100000),
              boxNo: item['箱号'],
              boxType: item['箱型'],
              boxSize: item['尺寸'],
              section: item['节数'],
              quantity: item['件数'],
              ton: item['重量'],
              volume: item['体积']
            });
          });
        }
      };
    },
    /**
     * 选择票货
     */
    checkTicket() {
      if(this.formData.customerId.length === 0) {
        this.$message.warning('请先选择客户！')
        return
      }
      this.dialogVisible = true
      this.$nextTick(() =>{
        this.$refs.checkTicket.cargotableData = []
        this.$refs.checkTicket.$refs.baseTable.clearSelection()
      })
    },
    /**
     * 确定票货
     */
    submitTicket() {
      const uniqueFunc = function(arr, uniId){
        const res = new Map();
        return arr.filter((item) => !res.has(item[uniId]) && res.set(item[uniId], 1));
      }

      const data = JSON.parse(JSON.stringify(this.$refs.checkTicket.checkRow))
      data.forEach(item => {
        this.billList.push(item)
      })
      this.billList = uniqueFunc(this.billList,'id')
      this.dialogVisible = false
    },
    /**
     * 删除票货信息
     * @params type td:提单 jzx：集装箱
     */
    handleDelete(id, type) {
      if (type === 'td') this.billList = this.billList.filter(item => item.id !== id)
      if (type === 'jzx') this.billBoxList = this.billBoxList.filter(item => item.id !== id)
      console.log(id, 'row');
    },
    /**
     * 按钮事件
     */
    buttonClick(i) {
      i()()
    },
    /**
     * 修改文件
     */
    changeFile(fileList) {
      this.formData.mattachmentInfoList = fileList
    },
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/form.less";

[v-cloak] {
	display: none;
}
</style>
